<template>
  <div class="mainIndex">
        <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="tabClick">
            <el-tab-pane
                v-for="(item) in editableTabs"
                :key="item.name"
                :label="item.title"
                :closable="item.closable"
                :name="item.name"
                :disabled="item.disabled">
                 <keep-alive>
                     <component :is="componentId"></component>
                 </keep-alive>
            </el-tab-pane>
        </el-tabs>
  </div>
</template>
<script lang="ts">
const tabInfos = namespace('tabInfos');
import { Component, Vue,Provide, Watch } from 'vue-property-decorator';
import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
import PermissionSetting from "@/components/permission-setting/index.vue";
import FormCreate from "@/components/form-create/create-design.vue";
import listCreate from "@/components/list-create/index.vue";
import TableCloumnList from "@/components/list-create/table-column-detial/index.vue";
import UserList from "@/components/user-list/index.vue";
import RoleList from "@/components/role-list/index.vue";
import UserEdit from "@/components/user-list/edit.vue";
@Component({
  components: {
       PermissionSetting,
       FormCreate,
       listCreate,
       TableCloumnList,
       UserList,
       RoleList,
       UserEdit
  },
})
export default class Index extends Vue {
    @Provide() tabIndexRef = this;
    @tabInfos.State currentMenu;
    private params:any={};
    private editableTabsValue:any="2";
    private editableTabs:Array<any>=new Array<any>();
    private tabIndex:any=2;
    private currentTab:any="";
    private componentId:any="form-create";
    created(){
        this.initTab();
        this.initCacheTab();
    }
    //记住当前选中的数据
    private initCacheTab(){
            const currentUserName=localStorage.getItem("username");
            const currentMenu=localStorage.getItem("currentMenu"+"_"+currentUserName);
            let currentMenuObj=JSON.parse(currentMenu);
            this.$nextTick(()=>{
                 this.urlChange(currentMenuObj);
            });
    }
    private initTab(){
         this.editableTabs.push(
            {
                title: '首页',
                name: 'home',
                closable:false
            }
         );
         this.$nextTick(()=>{
              this.editableTabsValue = "home";     
         })
    }
    addTab(targetName:any,params:any) {
        this.params=params;
        let currentItem=this.editableTabs.find(item=>item.name==params.currentTab.componentId);
        if(currentItem){
            this.editableTabsValue = params.currentTab.componentId;
            return false;
        }
        this.editableTabs.push(
            {
                title: targetName,
                name: params.currentTab.componentId,
                closable:true
            }
        );
        this.editableTabsValue = params.currentTab.componentId;
        this.currentTab=params.currentTab;
    }

    removeTab(targetName:any) {
       if(targetName=="home"){
            return false;
        }
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
            tabs.forEach((tab:any, index:any) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        activeName = nextTab.name;
                    }
                }
            });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        this.componentId =activeName;
    }
    //切换页签调用
    public tabClick(currentTab:any){
          this.componentId = currentTab.name;
    }
    @Watch("currentMenu",{deep:true})
    public urlChange(currentMenu:any){
          this.componentId=currentMenu.componentId; 
          this.addTab(currentMenu.name,{index:currentMenu.index,currentTab:currentMenu});
    }
}
</script>
<style scoped lang="less">
    .mainHeader{
        height: 38px;
        width: 100%;
        background: #fafafa;
        display: flex;
        flex-direction: row;
        .nextTabStart{
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 11px;
        }
        .nextTabEnd{
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .homePage{
            min-width: 60px;
            font-size: 13px;
            display: flex;
            align-items: center;
            background-color: #F5F5F5;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        .newTabItem{
           min-width: 60px;
           background: #eaedf1;
           display: flex;
           font-size: 13px;
           align-items: center;
           padding-left: 15px;
           padding-right: 5px;
           .el-icon-close{
                margin-left: 5px;  
                cursor: pointer;
           }
           .itemName{
                cursor: pointer;
           }
        }
    }
</style>
